<template>
  <div class="parent">
    <!-- <div
      @click="moveLeft()"
      class="btn btn-left"
      @mouseenter="carouselPause"
      @mouseleave="carouselPlay"
    ></div>-->
    <div class="carousel-box">
      <ul
        @mouseenter="carouselPause"
        @mouseleave="carouselPlay"
        class="carousel"
        :style="moveStyle"
      >
        <li
          class="carousel-item"
          v-for="(item,index) of message"
          :key="index"
          style="display:flex;flex-direction:column;justify-content:center"
        >
          <img
            v-if="IP+item.thumb"
            :src="IP+item.thumb"
            style="object-fit:contain; 
object-position: top;"
          />
        </li>
        <li class="carousel-item">
          <img v-if="IP+message[0].thumb" :src="IP+message[0].thumb" />
        </li>
      </ul>
      <ul class="dots">
        <li
          :class="{active:i==0}"
          @click="chosen(0)"
          v-for="(item,index) in message.length"
          :key="index"
        ></li>
        <!-- <li :class="{active:i==1}" @click="chosen(1)"></li>
        <li :class="{active:i==2}" @click="chosen(2)"></li>-->
      </ul>
    </div>
    <!-- <div
      style="margin-left:800Ppx"
      @click="moveRight()"
      class="btn btn-right"
      @mouseenter="carouselPause"
      @mouseleave="carouselPlay"
    ></div>-->
  </div>
</template>
<script>
export default {
  name: "zhr-carousel",
  data() {
    return {
      i: 0,
      moveStyle: {
        transform: ""
      },
      li: [1, 2, 3],
      img: [
        { img: require("../../assets/image/bei.png") },
        { img: require("../../assets/image/bei.png") },
        { img: require("../../assets/image/bei.png") }
      ],

      // animate: false,
      // duration: 500,
      imgCount: this.message.length,
      canClick: true,
      timer: "",
      autoPlayTime: 4000
    };
  },
  mounted() {
    this.carouselPlay();
  },
  destroyed() {
    this.carouselPause();
  },
  props: ["message"],
  methods: {
    // moveTo(to) {
    //   if (to == undefined) {
    //     to = this.i + 1;
    //   }
    //   if (this.i == 0) {
    //     if (to > this.i) {
    //       // this.animate = true;
    //     } else {
    //       // this.animate = false;
    //       this.moveStyle.transform = `translateX(-${this.imgCount * 100}%)`;
    //       // let timer1 = setTimeout(() => {
    //       this.moveTo(this.imgCount - 1);
    //       // clearTimeout(timer1);
    //       // }, 100);
    //       return;
    //     }
    //   }
    //   this.i = to;
    //   this.moveStyle.transform = `translateX(-${this.i * 100}%)`;
    //   if (this.i == this.imgCount) {
    //     this.i = 0;
    //     // let timer2 = setTimeout(() => {
    //     //   this.animate = false;
    //     this.moveStyle.transform = "translateX(0%)";
    //     //   clearTimeout(timer2);
    //     // }, this.duration);
    //   }
    // },
    moveRight() {
      this.moveStyle.transform = `translateX(-${this.imgCount * 100}%)`;
      this.moveRight(this.imgCount - 1);
    },
    // move(n) {
    //   if (this.canClick) {
    //     this.moveTo(this.i + n);
    //     // this.canClick = false;
    //     // let timer3 = setTimeout(() => {
    //     this.canClick = true;
    //     //   clearTimeout(timer3);
    //     // }, this.duration + 100);
    //   }
    // },
    carouselPlay() {
      // this.timer = setInterval(() => {
      //   this.moveTo();
      // }, this.autoPlayTime);
    },
    carouselPause() {
      // clearInterval(this.timer);
    },
    chosen(index) {
      this.moveTo(index);
      // let timer = setTimeout(function() {
      this.canClick = true;
      //   clearTimeout(timer);
      // }, this.duration);
    }
  }
};
</script>
<style scoped>
.parent {
  width: 100%;
  display: flex;
}
.carousel-box {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 400px;
  margin: auto;
}
.carousel,
.dots {
  display: flex;
  padding: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel-item img {
  width: 500px;
  height: 500px;
}
.transition {
  transition: all 0.5s linear;
}

.dots > li {
  border: 2px solid #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  margin-right: 10px;
  box-shadow: 3px 2px 5px #b7b7b7;
  cursor: pointer;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -25px;
}
.active {
  background: #b7b7b7;
}
.btn {
  position: absolute;
  top: 37%;
  background-repeat: no-repeat;
  background-position: center;
  width: 190px;
  height: 93px;
  cursor: pointer;
  margin-top: -20px;
  z-index: 80;
  transform-origin: center center;
}
.btn:hover {
  transform: scale(1.2);
}
.btn-left {
  left: 45px;
  background-image: url(../../assets/image/book/row_left.png);
}
.btn-right {
  right: 45px;
  background-image: url(../../assets/image/book/row_right.png);
}
</style>